// 版本信息管理
<template>
    <div class="versions">
      <div class="install-title">
        <div>
          <div>
            版本信息管理
          </div>
          <el-button v-show="isOpShow" type="primary" size="mini" @click="addClick">新增版本信息</el-button>
        </div>
      </div>
      <div class="install-main">
        <div class="versions-main">
          <ul>
            <li class="fisterLi" v-show="verLists.length > 0">
              <div>
                版本类型
              </div>
              <div>
                资源链接
              </div>
              <div>
                版本号
              </div>
              <div>
                版本说明
              </div>
              <div>
                更新时间
              </div>
              <div>
                操作
              </div>
            </li>
            <li class="dataLi" v-for="(item,index) in verLists" :key="index" v-show="verLists.length > 0">
              <div>
                {{item.type | typeFun}}
              </div>
              <div>
                {{item.address | strFun}}
              </div>
              <div>
                {{item.versionCode}}
              </div>
              <div>
                {{item.versionDesc}}
              </div>
              <div>
                {{item.createTime | timeFun}}
              </div>
              <div class="dataLi-op">
                <div @click="updateClick(index)"  v-show="isOpShow">
                  <img src="/static/img/编辑.png" alt="">
                </div>
                <div @click="lookClick(index)">
                  <img src="/static/img/查看.png" alt="">
                </div>
              </div>
            </li>
            <li v-show="verLists.length == 0" class="nullLi">  
              暂无数据
            </li>
          </ul>
        </div>
      </div>
      <!-- 新增版本信息 -->
      <div class="updatePwd" v-show="updatePwdShow">
        <transition name="slide-fade">
          <div class="updatePwd-content" v-show="updatePwdShow">
            <div class="up-content-title">
              <div>
                新增版本信息
              </div>
              <div @click="cancelClick">
                X
              </div>
            </div>
            <div class="up-content-main" v-loading="addApkLoading" element-loading-text="上传中...">
              <div class="up-c-m-list">
                <div class="up-c-m-listLeft">
                 <small>*</small> 版本类型：
                </div>
                <div class="up-c-m-listRight">
                    <select v-model="typeModelVal" @change="selectTypeChange">
                        <option v-for="(tyep,index) in tyepLists" :key="index" v-bind:value="index">{{tyep.name}}</option>
                    </select>
                </div>
              </div>
              <div class="up-c-m-list">
                <div class="up-c-m-listLeft">
                 <small>*</small> 版本号：
                </div>
                <div class="up-c-m-listRight">
                  <input type="text" placeholder="请输入版本号" v-model="versionCodeVal"  :class="{redBorder:isRedversionCodeVal,grayBorder:isGrayversionCodeVal}">
                </div>
              </div>
              <div class="up-c-m-list">
                <div class="up-c-m-listLeft">
                 <small>*</small> 更新编号：
                </div>
                <div class="up-c-m-listRight">
                  <input type="number" placeholder="请输入更新编号" v-model="versionNumVal" :class="{redBorder:isRedversionNumVal,grayBorder:isGrayversionNumVal}">
                </div>
              </div>
              <div class="up-c-m-file" v-show="typeModelVal != 1">
                <div class="up-c-m-listLeft">
                 <small>*</small> 上传apk：
                </div>
                <div class="up-c-m-listRight">
                  <label for="fileApk">
                    上传APK
                  </label>
                  <input id="fileApk" type="file" v-on:change="fileChange($event)">
                </div>
              </div>
              <div class="up-c-m-listNews" v-show="typeModelVal != 1">
                <div class="up-c-m-listLeft">
                 
                </div>
                <div class="up-c-m-listNewsRight" :class="{redTest:isRedlinkApkUrlVal,grayTest:isGraylinkApkUrlVal}">
                  {{linkApkUrlVal}}
                </div>
              </div>
              <div class="up-c-m-text">
                <div class="up-c-m-listLeft">
                 <small>*</small> 版本说明：
                </div>
                <div class="up-c-m-listRight">
                  <textarea :class="{redBorder:isRedversionDescVal,grayBorder:isGrayversionDescVal}" v-model="versionDescVal" placeholder="版本更新说明，英文逗号分隔"></textarea>
                </div>
              </div>
            </div>
            <div class="up-content-but">
              <div></div>
              <div @click="affirmClick">
                保存
              </div>
            </div>
          </div>
        </transition>
      </div>
      <!-- 查看版本信息 -->
      <div class="updatePwd" v-show="LookupdatePwdShow">
        <transition name="slide-fade">
          <div class="updatePwd-content" v-show="LookupdatePwdShow">
            <div class="up-content-title">
              <div>
                查看版本信息
              </div>
              <div @click="cancelClick">
                X
              </div>
            </div>
            <div class="up-content-main">
              <div class="up-c-m-listLook">
                <div class="up-c-m-listLeftLook">
                 <small></small> 版本类型：
                </div>
                <div class="up-c-m-listRightLook">
                  {{looktypeModelVal}} 
                </div>
              </div>
              <div class="up-c-m-listLook">
                <div class="up-c-m-listLeftLook">
                 <small></small> 版本号：
                </div>
                <div class="up-c-m-listRightLook">
                  {{lookversionCodeVal}} 
                </div>
              </div>
              <div class="up-c-m-listLook">
                <div class="up-c-m-listLeftLook">
                 <small></small> 更新编号：
                </div>
                <div class="up-c-m-listRightLook">
                  {{lookversionNumVal}}
                </div>
              </div>
              <div class="up-c-m-listLook" v-show="typeModelVal != 1">
                <div class="up-c-m-listLeftLook">
                    <small></small> 版本地址：
                </div>
                <div class="up-c-m-listRightLook">
                  {{looklinkApkUrlVal}}
                </div>
              </div>
              <div class="up-c-m-listLook">
                <div class="up-c-m-listLeftLook">
                 <small></small> 版本说明：
                </div>
                <div class="up-c-m-listRightLook">
                   {{lookversionDescVal}}
                </div>
              </div>
            </div>
            <div class="up-content-but">
              <div></div>
              <div @click="cancelClick">
                取消
              </div>
            </div>
          </div>
        </transition>
      </div>
    </div>
</template>
<script>
import { mapActions } from "vuex";
const crypto = require("crypto");
export default {
  data() {
    return {
      isOpShow: false,
      looktypeModelVal: "",
      looklinkApkUrlVal: "",
      lookversionCodeVal: "",
      lookversionNumVal: "",
      lookversionDescVal: "",

      versionCodeVal: "",
      isRedversionCodeVal: false,
      isGrayversionCodeVal: true,

      versionNumVal: "",
      isRedversionNumVal: false,
      isGrayversionNumVal: true,

      versionDescVal: "",
      isRedversionDescVal: false,
      isGrayversionDescVal: true,

      addApkLoading: false,
      updatePwdShow: false, // 弹框显示隐藏
      verLists: [], // 版本列表
      typeModelVal: 0, // 版本类型选择
      LookupdatePwdShow: false, // 查看弹出框

      linkApkUrlVal: "链接地址...",
      isRedlinkApkUrlVal: false,
      isGraylinkApkUrlVal: true,

      updateIndex: 1,
      versionId: "",
      tyepLists: [{ name: "安卓" }, { name: "iOS" }] //版本类型选择
    };
  },
  filters: {
    strFun(val) {
      if (val) {
        return val;
      } else {
        return "暂无";
      }
    },
    typeFun: function(val) {
      if (val == 2) {
        return "iOS";
      } else {
        return "安卓";
      }
    },
    // 返回时间过滤
    timeFun: function(val) {
      if (val) {
        val = Number(val);
        var standardTime = new Date(val);
        var y, m, d, h, f;
        y = standardTime.getFullYear();
        m = standardTime.getMonth() + 1;
        m = m > 9 ? m : "0" + m;
        d = standardTime.getDate();
        d = d > 9 ? d : "0" + d;
        h = standardTime.getHours();
        h = h > 9 ? h : "0" + h;
        f = standardTime.getMinutes();
        f = f > 9 ? f : "0" + f;
        return y + "-" + m + "-" + d + " " + h + ":" + f;
      } else {
        return "暂无";
      }
    }
  },
  created: function() {
    var accessToken = sessionStorage.getItem("accessToken");
    if (accessToken) {
      this.listsFun();
    }
    if (sessionStorage.getItem("mobile") == "15829888314") {
      this.isOpShow = true;
    }
  },

  methods: {
    // 初始化数据
    listsFun() {
      var self = this;
      self
        .getwebversionfindservicelist({})
        .then(data => {
          if (data.statusCode == 200) {
            if (data.data) {
              self.verLists = data.data;
            }
          } else {
            self.$message({
              type: "info",
              message: data.statusMessage
            });
          }
        })
        .catch(msg => {
          self.$message({
            type: "info",
            message: "服务器异常"
          });
        });
    },
    selectTypeChange() {
      if (this.typeModelVal == 2) {
        this.linkApkUrlVal = "";
      } else {
        this.linkApkUrlVal = "链接地址...";
      }
    },
    //选择
    fileChange(e) {
      var self = this;
      var files = e.target.files || e.dataTransfer.files;
      self.addApkLoading = true;
      self.uploadImage(files[0]);
    },
    //上传
    uploadImage(file) {
      var self = this;
      var formdata = new FormData();
      formdata.append("file", file);
      formdata.append("appKey", 111111);
      formdata.append("ext", file.name.split(".")[1]);
      formdata.append("fileSize", file.size);
      var text = "";
      var possible =
        "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
      for (var i = 0; i < 16; i++) {
        text += possible.charAt(Math.floor(Math.random() * possible.length));
      }
      var shaCode = crypto.createHash("md5");
      var md5Str = shaCode
        .update(text, "utf-8")
        .digest("hex")
        .toUpperCase();

      formdata.append("md5", md5Str);
      formdata.append("chunkSize", 1000);
      formdata.append("total", 1);
      formdata.append("index", 1);
      formdata.append("fileMd5", md5Str);
      formdata.append("partMd5", md5Str);
      self
        .getfileupload(formdata)
        .then(data => {
          self.addApkLoading = false;
          if (data.statusCode == 200) {
            self.$message({
              message: "上传成功",
              type: "success"
            });
            self.linkApkUrlVal = data.data.url;
            self.isRedlinkApkUrlVal = false;
            self.isGraylinkApkUrlVal = true;
            document.getElementById("fileApk").value = "";
          } else {
            self.$message({
              type: "info",
              message: data.statusMessage
            });
            document.getElementById("fileApk").value = "";
          }
        })
        .catch(msg => {
          self.addApkLoading = false;
          document.getElementById("fileApk").value = "";
          self.$message({
            type: "info",
            message: "服务器异常"
          });
        });
    },
    // 点击新增
    addClick() {
      this.updatePwdShow = true;
      this.updateIndex = 1;
    },
    // 查看详情
    lookClick(index) {
      var self = this;
      this.LookupdatePwdShow = true;
      if (self.verLists[index].type == 2) {
        self.looktypeModelVal = "iOS";
        this.typeModelVal = 1;
      } else {
        this.typeModelVal = 0;
        self.looktypeModelVal = "安卓";
      }
      self.looklinkApkUrlVal = self.verLists[index].address || "";
      self.lookversionCodeVal = self.verLists[index].versionCode || "";
      self.lookversionNumVal = self.verLists[index].versionNum || "";
      self.lookversionDescVal = self.verLists[index].versionDesc || "";
    },
    // 修改
    updateClick(index) {
      var self = this;
      this.updatePwdShow = true;
      this.updateIndex = 2;
      self.linkApkUrlVal = self.verLists[index].address || "";
      self.versionCodeVal = self.verLists[index].versionCode || "";
      self.versionId = self.verLists[index].id;
      self.versionDescVal = self.verLists[index].versionDesc || "";
      if (self.verLists[index].type == 2) {
        self.typeModelVal = 1;
      } else {
        self.typeModelVal = 0;
      }

      self.versionNumVal = self.verLists[index].versionNum || "";
    },
    // 取消
    cancelClick() {
      var self = this;
      this.updatePwdShow = false;
      this.LookupdatePwdShow = false;
      self.linkApkUrlVal = "链接地址...";
      self.versionCodeVal = "";
      self.versionDescVal = "";
      self.typeModelVal = 0;
      self.versionNumVal = "";
    },
    // 确认
    affirmClick() {
      var self = this;
      if (this.validateFun() == false) {
        var typeStr = 1;
        this.updatePwdShow = false;
        if (this.typeModelVal == 1) {
          typeStr = 2;
          self.linkApkUrlVal = "";
        } else {
          typeStr = 1;
        }
        if (this.updateIndex == 1) {
          self
            .getwebversionsave({
              versionNum: self.versionNumVal,
              type: typeStr,
              address: self.linkApkUrlVal,
              versionCode: self.versionCodeVal,
              versionDesc: self.versionDescVal
            })
            .then(data => {
              if (data.statusCode == 200) {
                self.linkApkUrlVal = "链接地址...";
                self.versionCodeVal = "";
                self.versionDescVal = "";
                self.typeModelVal = 0;
                self.versionNumVal = "";
                self.listsFun();
                self.$message({
                  type: "success",
                  message: "添加版本信息成功！"
                });
              } else {
                self.$message({
                  type: "info",
                  message: data.statusMessage
                });
              }
            })
            .catch(msg => {
              self.$message({
                type: "info",
                message: "服务器异常"
              });
            });
        } else {
          self
            .getwebversionupdate({
              versionNum: self.versionNumVal,
              type: typeStr,
              id: self.versionId,
              address: self.linkApkUrlVal,
              versionCode: self.versionCodeVal,
              versionDesc: self.versionDescVal
            })
            .then(data => {
              if (data.statusCode == 200) {
                self.linkApkUrlVal = "链接地址...";
                self.versionCodeVal = "";
                self.versionDescVal = "";
                self.typeModelVal = 0;
                self.versionNumVal = "";
                self.listsFun();
                self.$message({
                  type: "success",
                  message: "修改版本信息成功！"
                });
              } else {
                self.$message({
                  type: "info",
                  message: data.statusMessage
                });
              }
            })
            .catch(msg => {
              self.$message({
                type: "info",
                message: "服务器异常"
              });
            });
        }
      }
    },
    // 验证
    validateFun() {
      var self = this;
      var regOne = /^[\s]*$/; //输入不能为空
      var regTwo = new RegExp(/^[\u4e00-\u9fa5]{1,15}$/);
      var regThree = new RegExp(
        "[+`~@#$^&*()=|{}\\[\\]<>/@#￥&*;（）——|{}【】]"
      );
      if (regOne.test(self.versionNumVal)) {
        self.isRedversionNumVal = true;
        self.isGrayversionNumVal = false;
      } else {
        self.isRedversionNumVal = false;
        self.isGrayversionNumVal = true;
      }
      if (regOne.test(self.versionCodeVal)) {
        self.isRedversionCodeVal = true;
        self.isGrayversionCodeVal = false;
      } else {
        self.isRedversionCodeVal = false;
        self.isGrayversionCodeVal = true;
      }
      if (regOne.test(self.versionDescVal)) {
        self.isRedversionDescVal = true;
        self.isGrayversionDescVal = false;
      } else {
        self.isRedversionDescVal = false;
        self.isGrayversionDescVal = true;
      }
      if (self.typeModelVal == 1) {
        self.isRedlinkApkUrlVal = false;
        self.isGraylinkApkUrlVal = true;
      } else {
        if (self.linkApkUrlVal == "链接地址...") {
          self.isRedlinkApkUrlVal = true;
          self.isGraylinkApkUrlVal = false;
        } else {
          self.isRedlinkApkUrlVal = false;
          self.isGraylinkApkUrlVal = true;
        }
      }

      if (
        self.isRedlinkApkUrlVal != true &&
        self.isRedversionDescVal != true &&
        self.isRedversionCodeVal != true &&
        self.isRedversionNumVal != true
      ) {
        return false;
      } else {
        return true;
      }
    },
    ...mapActions([
      "getwebversionfindservicelist",
      "getwebversionupdate",
      "getwebversionsave",
      "getfileupload"
    ])
  },
  watch: {
    versionNumVal(val) {
      var self = this;
      var regOne = /^[\s]*$/; //输入不能为空
      if (regOne.test(val)) {
        self.isRedversionNumVal = true;
        self.isGrayversionNumVal = false;
      } else {
        self.isRedversionNumVal = false;
        self.isGrayversionNumVal = true;
      }
    },
    versionCodeVal(val) {
      var self = this;
      var regOne = /^[\s]*$/; //输入不能为空
      if (regOne.test(val)) {
        self.isRedversionCodeVal = true;
        self.isGrayversionCodeVal = false;
      } else {
        self.isRedversionCodeVal = false;
        self.isGrayversionCodeVal = true;
      }
    },
    versionDescVal(val) {
      var self = this;
      var regOne = /^[\s]*$/; //输入不能为空
      if (regOne.test(val)) {
        self.isRedversionDescVal = true;
        self.isGrayversionDescVal = false;
      } else {
        self.isRedversionDescVal = false;
        self.isGrayversionDescVal = true;
      }
    }
  }
};
</script>
<style scoped>
.up-c-m-listLeftLook {
  height: 30px;
  line-height: 25px;
  width: 150px;
  text-align: right;
}
.up-c-m-listLook {
  margin-top: 20px;
  width: 100%;
  display: flex;
  min-height: 37px;
  align-items: center;
}
.up-c-m-listRightLook {
  width: 400px;
  overflow: hidden;
  word-wrap: break-word;
}
.nullLi {
  width: 100%;
  text-align: center;
  justify-content: center;
  height: 300px;
  line-height: 300px;
}
.up-c-m-listRight {
  margin-left: 30px;
}
.up-c-m-listLeft {
  width: 150px;
  text-align: right;
}
.up-c-m-listLeft small {
  color: red;
}
.up-c-m-listNewsRight {
  margin-left: 35px;
  width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  width: 350px;
}
.up-c-m-listNews {
  width: 100%;
  display: flex;
  min-height: 15px;
  margin-top: 5px;
  align-items: center;
}
.up-c-m-listNews input,
.up-c-m-list input {
  height: 35px;
  border-radius: 5px;
  line-height: 35px;
  padding-left: 10px;
  width: 340px;
}

.redBorder {
  border: 1px solid #38adff !important;
}

.grayBorder {
  border: 1px solid #d9d9d9 !important;
}

.redTest {
  color: #38adff !important;
}

.grayTest {
  color: #8e8f94 !important;
}

.up-c-m-list select {
  border: 1px solid #ccc;
  height: 35px;
  border-radius: 5px;
  line-height: 35px;
  padding-left: 10px;
  width: 350px;
}
.up-c-m-file .up-c-m-listRight {
  display: flex;
  align-items: center;
}
.up-c-m-file label {
  width: 80px;
  height: 33px;
  border-radius: 3px;
  background-color: #38adff;
  text-align: center;
  line-height: 33px;
  color: #fff;
  cursor: pointer;
}
.up-c-m-file input {
  display: block;
  width: 0px;
  height: 0px;
  display: none;
  border: 0px solid #fff;
  overflow: hidden;
}
.up-c-m-file {
  margin-top: 20px;
  width: 100%;
  display: flex;
  height: 37px;
  align-items: center;
}
.up-c-m-text textarea {
  height: 80px;
  border-radius: 5px;
  padding-left: 10px;
  padding-top: 7px;
  width: 340px;
  resize: none;
}
.up-c-m-text .up-c-m-listLeft {
  height: 80px;
  line-height: 25px;
}
.up-c-m-text {
  margin-top: 20px;
  width: 100%;
  display: flex;
  height: 80px;
  align-items: center;
}
.up-c-m-list {
  margin-top: 20px;
  width: 100%;
  display: flex;
  height: 37px;
  align-items: center;
}
.up-content-but {
  height: 60px;
  width: 100%;
  background-color: #f0f6fa;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #e5e5e5;
}
.up-content-but > div:nth-child(2) {
  width: 55px;
  height: 35px;
  border-radius: 4px;
  background-color: #38adff;
  text-align: center;
  line-height: 35px;
  color: #fff;
  margin-right: 25px;
  cursor: pointer;
}
.up-content-main {
  min-height: 323px;
  width: 100%;
  border-top: 1px solid #e5e5e5;
  margin-bottom: 20px;
  /* overflow: hidden; */
}
.up-content-title > div:nth-child(1) {
  margin-left: 15px;
}
.up-content-title > div:nth-child(2) {
  margin-right: 15px;
  font-size: 16px;
  color: #ccc;
  cursor: pointer;
}
.up-content-title {
  height: 52px;
  width: 100%;
  background-color: #f0f6fa;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.updatePwd-content {
  width: 600px;
  min-height: 350px;
  background-color: #fff;
  border-radius: 5px;
  overflow: hidden;
  margin-top: 70px;
}
.updatePwd {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.slide-fade-enter-active {
  transition: all 0.7s ease;
}

.slide-fade-enter,
.slide-fade-leave-active {
  transform: translateY(-30px);
  opacity: 0;
}
.fisterLi {
  display: flex;
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #eaeaea;
}
.dataLi {
  display: flex;
  min-height: 50px;
  border-top: 1px solid #ccc;
}
.dataLi > div {
  display: flex;
  align-items: center;
  justify-content: center;
  word-wrap: break-word;
  word-break: break-all;
  border-left: 1px solid #ccc;
}
.fisterLi > div {
  text-align: center;
  border-left: 1px solid #ccc;
}
.fisterLi > div:nth-child(1),
.dataLi > div:nth-child(1) {
  width: 8%;
  border: 0;
}
.fisterLi > div:nth-child(2),
.dataLi > div:nth-child(2) {
  width: 25%;
  padding-left: 10px;
  padding-right: 10px;
}
.dataLi > div:nth-child(2) {
  padding-top: 10px;
  padding-bottom: 10px;
}
.fisterLi > div:nth-child(3),
.dataLi > div:nth-child(3) {
  width: 8%;
}
.fisterLi > div:nth-child(4),
.dataLi > div:nth-child(4) {
  width: 30%;
  padding-left: 10px;
  padding-right: 10px;
}
.dataLi > div:nth-child(4) {
  padding-top: 10px;
  padding-bottom: 10px;
}
.fisterLi > div:nth-child(5),
.dataLi > div:nth-child(5) {
  width: 17%;
}
.fisterLi > div:nth-child(6),
.dataLi > div:nth-child(6) {
  width: 12%;
}
.dataLi-op {
  display: flex;
  align-items: center;
  justify-content: center;
}
.dataLi-op > div {
  width: 20px;
  height: 20px;
  margin-left: 10px;
  margin-right: 10px;
  cursor: pointer;
}
.dataLi-op > div img {
  width: 20px;
  height: 20px;
}
.versions-main {
  width: 91%;
  min-height: 80px;
  border: 1px solid #ccc;
  margin-bottom: 40px;
}
.install-main {
  min-height: 80px;
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;
}
.install-title {
  height: 80px;
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;
}
.install-title > div {
  width: 91%;
  background-color: rgba(56, 173, 255, 0.2);
  height: 40px;
  line-height: 40px;
  font-size: 14px;

  display: flex;
  align-items: center;
  justify-content: space-between;
}
.install-title > div > div:nth-child(1) {
  padding-left: 15px;
  color: #000;
}

.install-title .el-button {
  margin-right: 15px;
}

.versions {
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  width: 100%;
  min-height: 400px;
}
</style>